<script setup>
import { inject, onBeforeMount, ref, watch } from "@vue/runtime-core";

const tabs = inject("tabsProvider");
const isActive = ref(false);
// const index = ref(0);
const props = defineProps({
  label: String,
  name: String,
});

watch(
  () => tabs.selectedIndex,
  () => {
    isActive.value = props.name === tabs.selectedIndex;
  }
);

onBeforeMount(() => {
  // index.value = tabs.count;
  // tabs.count++;
  if (tabs.selectedIndex == null) {
    tabs.selectedIndex = props.name
  }
  if (tabs.selectedIndex == props.name) {
    isActive.value = true;
  }
});


</script>

<template>
  <div v-show="isActive" class="tab-detail">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
div.tab-detail {
  width: 100%;
  display: flex;
}
</style>